<template>
  <div id="integralDetailDialog">
    <el-dialog
      title="用户积分详情"
      :visible.sync="dialogData.isShow"
      width="900px"
      @close="closeAddDialog"
    >
      <!-- 顶部搜索框部分 -->
      <div class="search-box">
        <el-form ref="ruleForm" :inline="true" :model="formInline">
          <!-- 输入搜索部分 -->
          <el-form-item label="变动类型" prop="changeType">
            <el-select
              v-model="formInline.changeType"
              placeholder="请选择来源"
              clearable
            >
              <el-option
                v-for="item in changeTypeList"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渠道分类" prop="changeClass">
            <el-select
              v-model="formInline.changeClass"
              placeholder="请选择用户类型"
              clearable
            >
              <el-option
                v-for="item in changeClassList"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="s-btn">
            <el-button
              type="success"
              icon="el-icon-search"
              @click="toSearch('ruleForm')"
            >
              查询
            </el-button>
            <el-button type="success" plain @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <freshCom @searchList="searchList"></freshCom>
      <!-- 表格部分 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        height="490"
      >
        <el-table-column type="index" width="80" align="center" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="时间"
          width="160"
        ></el-table-column>
        <el-table-column prop="userSencCnt" label="积分变动" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.integralChangeType" class="greenText"
              >+ {{ scope.row.integralChangeNumber }}</span
            >
            <span v-else class="redText"
              >- {{ scope.row.integralChangeNumber }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="changeClass" label="渠道分类" width="100">
          <template slot-scope="scope">
            {{ scope.row.changeClass | filterName('integralsDetailsClass') }}
          </template>
        </el-table-column>
        <el-table-column label="积分变更途径" prop="integralChangeChannel">
          <template slot-scope="scope">
            {{ scope.row.integralChangeChannel }}
          </template>
        </el-table-column>
        <el-table-column
          prop="integralChangeReason"
          label="变更原因"
        ></el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="success"
          :loading="confirmloading"
          @click="closeAddDialog"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getDetailList } from '@/api/couponsIntegral/integrals'
export default {
  name: 'integralDetailDialog',
  msg: '用户积分详情弹窗',
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      confirmloading: false,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        changeType: '',
        changeClass: ''
      },
      dpAccount: '',
      changeTypeList: [{ dictLabel: '全部', dictValue: '' }], // 变动类型
      changeClassList: [{ dictLabel: '全部', dictValue: '' }] // 渠道分类
    }
  },
  mounted() {
    this.dpAccount = this.dialogData.dpAccount
    this.getStatusList()
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = {
        ...this.formInline,
        ...this.searchParams,
        dpAccount: this.dpAccount
      }
      getDetailList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 获取字典状态 */
    async getStatusList() {
      //变动类型
      let data = await sysNormalDisable('integrals_details_type')
      this.changeTypeList = this.changeTypeList.concat(data)
      //渠道分类
      let data2 = await sysNormalDisable(
        'integrals_details_class',
        'integralsDetailsClass'
      )
      this.changeClassList = this.changeClassList.concat(data2)
      this.searchList()
    },
    // 重置
    reset() {
      this.$refs['ruleForm'].resetFields()
    },
    // 弹窗关闭事件
    closeAddDialog() {
      this.loading = false
      this.dialogData.params = null
      this.dialogData.isShow = false
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#integralDetailDialog {
  .el-table::before {
    height: 0;
  }
  .search-box {
    padding-left: 0 !important;
  }
  .greenText {
    color: #03aa87;
  }
  .redText {
    color: #f00;
  }
}
</style>
